<template>
	<div id="app">
		<div class="" v-show="$route.name!='login'">
			<div class="quick-nav">
				<div class="main-wrap main-header">
					<div class="left">
						<div class="left-sidemenu-wrap">
							<img v-if="token" src="./assets/img/gengduo.png" alt="" class="gengduoxinxi"
								@click="getShowInfo">
							<div class="left-side" v-if="isInfo">
								<div class="account-info-block">
									<div class="avatarImg">
										<img src="./assets/img/gerenzhongxin.png" alt="">
									</div>
									<div class="rank">{{$t('indexTitle.title25')}} 0</div>
									<div class="account-info">
										<div class="name">{{info.name}}</div>
									</div>
								</div>
								<div class="link-block-section">
									<div class="link-blocks">
										<div class="link-block-item" @click="goNextPage('/mission')">
											<img src="./assets/img/guanyiwomen.png" alt="">
											<div class="block-item-title">{{$t('indexTitle.title207')}}</div>
											<!-- <span class="msg-notification"></span> -->
										</div>
										<div class="link-block-item">
											<img src="./assets/img/lunpan.png" alt="">
											<div class="block-item-title">{{$t('indexTitle.title208')}}</div>
										</div>
										<div class="link-block-item" @click="goNextPage('/affiliate')">
											<img src="./assets/img/tuijian.png" alt="">
											<div class="block-item-title">{{$t('indexTitle.title209')}}</div>
										</div>
										<div class="link-block-item" @click="goNextPage('/vipRebates')">
											<img src="./assets/img/vip.png" alt="">
											<div class="block-item-title">{{$t('indexTitle.title321')}}</div>
										</div>
									</div>
								</div>
								<div class="link-icons">
									<div class="link-icon-item" @click="goNextPage('/promotions')">
										<img src="./assets/img/youhuihuodong.png" alt="">
										<h4>{{$t('indexTitle.title14')}}</h4>
									</div>
									<!-- <a class="link-icon-item" href="https://direct.lc.chat/16586199/" target="_blank"
									rel="noreferrer">
									<img src="./assets/img/kefy.png" alt="">
									<h4>聯繫我們</h4>
								</a> -->
									<div class="link-icon-item" @click="goSevPage()">
										<img src="./assets/img/kefy.png" alt="">
										<h4>{{$t('indexTitle.title304')}}</h4>
									</div>
									<div class="link-icon-item" @click="goNextPage('/personalMsg')">
										<img src="./assets/img/gongaozhongxin.png" alt="">
										<h4>{{$t('indexTitle.title33')}}</h4>
									</div>
									<div class="link-icon-item" @click="goNextPage('/helpcenter')">
										<img src="./assets/img/guanyuwomen.png" alt="">
										<h4>{{$t('indexTitle.title211')}}</h4>
									</div>
									<div class="link-icon-item">
										<img src="./assets/img/xiazai.png" alt="">
										<h4>{{$t('indexTitle.title53')}}</h4>
									</div>
								</div>
							</div>
						</div>
						<div class="time">20/08/2024 11:11:12 AM (GMT +8)</div>
						<div class="yuyanbox" @click="getShowLang">
							<img src="./assets/images/zh_cn.png" alt="" v-if="$i18n.locale=='zh'">
							<img src="./assets/images/hk.png" alt="" v-if="$i18n.locale=='ft'">
							<img src="./assets/images/en.png" alt="" v-if="$i18n.locale=='en'">
							<div class="dsaf">
								<img src="./assets/img/gengduotyuyan.png" alt="">
							</div>
							<div class="langBox" v-if="isShowLang">
								<div class="langItBox" @click.stop="switchLang('zh')">
									<img src="./assets/images/zh_cn.png" alt="">
								</div>
								<div class="langItBox" @click.stop="switchLang('ft')">
									<img src="./assets/images/hk.png" alt="">
								</div>
								<div class="langItBox" @click.stop="switchLang('en')">
									<img src="./assets/images/en.png" alt="">
								</div>
							</div>
						</div>

					</div>
					<div class="right">
						<div class="header-account" v-if="token">
							<div class="avatar" @click="goNextPage('/mine')">
								<img src="./assets/img/gerenzhongxintow.png" alt="">
							</div>
							<span @click="goNextPage('/mine')">{{info.name}}</span>
							<div class="wallet" @click="getrefresh">{{info.money||0}} <img
									src="./assets/img/shuaxin.png" alt="" :class="{ssssxuanzhuan:isrefresh}"></div>
							<div class="payment-function" @click="goNextPage('/deposit')"> <img
									src="./assets/img/chongzhi.png" alt="">{{$t('indexTitle.title26')}}</div>
							<div class="payment-function" @click="goNextPage('/withdraw')"> <img
									src="./assets/img/tikuan.png" alt="">{{$t('indexTitle.title27')}}</div>
							<div class="btn-big" @click="loginOut">
								{{$t('indexTitle.title212')}}
							</div>

						</div>
						<div class="header-account" v-if="!token">
							<div class="btn-big" @click="showlogin = true">
								{{$t('indexTitle.title191')}}
							</div>
							<div class="btn-bigTow" @click="goNextPage('/register')">
								{{$t('indexTitle.title213')}}
							</div>
						</div>
					</div>
				</div>
			</div>
			<header>
				<div class="main-header navigation">
					<div class="logo">
						<img @click="goNextPage('/')" src="https://logom.s3.ap-east-1.amazonaws.com/HKGAME.png" alt="">
					</div>
					<ul class="nav">
						<li class="nav-sports" data-content="SPORTS" :data-title="$t('indexTitle.title214')"
							@click="goNextPage('/sports')">
							<div class="nav-item" style="padding-top: 5px;">
								<img src="./assets/images/tiyu.webp" alt="" style="width: 35px;
								height: 35px;">
								<h3>{{$t('indexTitle.title214')}}</h3>
							</div>
							<div class="submenu">
								<ul>
									<li data-provider="lucky_sports" class="zh-TW"><a data-provider="HK11_SPORTS">
											<img src="../src/assets/newimg/tiyu1.png" alt="banner-lucky_sports"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/tiyu2.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/tiyu3.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/tiyu4.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
								</ul>
							</div>
						</li>
						<li class="nav-live" data-content="LIVE" :data-title="$t('indexTitle.title215')"
							@click="goNextPage('/live')">
							<div class="nav-item">
								<img src="./assets/images/zhenren.webp" alt="">
								<h3>{{$t('indexTitle.title215')}}</h3>
							</div>
							<div class="submenu">
								<ul>
									<li data-provider="lucky_sports" class="zh-TW"><a data-provider="HK11_SPORTS">
											<img src="./assets/newimg/zhenren1.webp" alt="banner-lucky_sports"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/zhenren2.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/zhenren3.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/zhenren4.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/zhenren5.png" alt="banner-three_sing"
												loading="lazy"></a></li>
								</ul>
							</div>
						</li>
						<li class="nav-egame" data-content="EGAME" :data-title="$t('indexTitle.title216')"
							@click="goNextPage('/egame')">
							<div class="nav-item egame">
								<img src="./assets/images/laohuji.webp" alt="">
								<h3>{{$t('indexTitle.title216')}}</h3>
							</div>
							<div class="submenu">
								<ul>
									<li data-provider="lucky_sports" class="zh-TW"><a data-provider="HK11_SPORTS">
											<img src="./assets/newimg/dianzi1.webp" alt="banner-lucky_sports"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/dianzi2.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/dianzi3.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/dianzi4.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/dianzi5.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/dianzi6.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
								</ul>
							</div>
						</li>
						<li class="nav-chess" data-content="CHESS" :data-title="$t('indexTitle.title217')"
							@click="goNextPage('/chess')">
							<div class="nav-item">
								<img src="./assets/images/qipai.webp" alt="">
								<h3>{{$t('indexTitle.title217')}}</h3>
							</div>
							<div class="submenu">
								<ul>
									<li data-provider="lucky_sports" class="zh-TW"><a data-provider="HK11_SPORTS">
											<img src="./assets/newimg/qipai1.webp" alt="banner-lucky_sports"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/qipai2.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/qipai3.png" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/qipai4.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/qipai5.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
								</ul>
							</div>
						</li>
						<li class="nav-mpg" data-content="MPG" :data-title="$t('indexTitle.title218')"
							@click="goNextPage('/mpg')">
							<div class="nav-item">
								<img src="./assets/images/buyu.webp" alt="">
								<h3>{{$t('indexTitle.title218')}}</h3>
							</div>
							<div class="submenu">
								<ul>
									<li data-provider="lucky_sports" class="zh-TW"><a data-provider="HK11_SPORTS">
											<img src="./assets/newimg/buyu1.webp" alt="banner-lucky_sports"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/buyu2.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/buyu3.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/buyu4.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/buyu5.webp" alt="banner-three_sing"
												loading="lazy"></a></li>
								</ul>
							</div>
						</li>
						<li class="nav-animal" data-content="ANIMAL" :data-title="$t('indexTitle.title219')"
							@click="goNextPage('/animal')">
							<div class="nav-item">
								<img src="./assets/images/dongwujingji.webp" alt="">
								<h3>{{$t('indexTitle.title219')}}</h3>
							</div>
							<div class="submenu">
								<ul>
									<li data-provider="lucky_sports" class="zh-TW"><a data-provider="HK11_SPORTS">
											<img src="./assets/newimg/dongwu1.webp" alt="banner-lucky_sports"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/newimg/dongwu2.png" alt="banner-three_sing"
												loading="lazy"></a></li>
								</ul>
							</div>
						</li>
						<li class="nav-esports" data-content="ESPORTS" :data-title="$t('indexTitle.title220')"
							@click="goNextPage('/esports')">
							<div class="nav-item">
								<img src="./assets/images/dianjing.webp" alt="">
								<h3>{{$t('indexTitle.title220')}}</h3>
							</div>
							<div class="submenu">
								<ul>
									<li data-provider="lucky_sports" class="zh-TW"><a data-provider="HK11_SPORTS">
											<img src="./assets/newimg/dianjing1.webp" alt="banner-lucky_sports"
												loading="lazy"></a></li>
								</ul>
							</div>
						</li>
						<!-- <li class="nav-lottery" data-content="LOTTERY" data-title="彩票遊戲">
							<div class="nav-item">
								<img src="./assets/images/caipiao.webp" alt="">
								<h3>彩票遊戲</h3>
							</div>
							<div class="submenu">
								<ul>
									<li data-provider="lucky_sports" class="zh-TW"><a data-provider="HK11_SPORTS">
											<img src="./assets/images/bg-home-sports.jpg" alt="banner-lucky_sports"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/images/bg-home-sports.jpg" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/images/bg-home-sports.jpg" alt="banner-three_sing"
												loading="lazy"></a></li>
									<li data-provider="three_sing" class="zh-TW"><a data-provider="WINS"><img
												src="./assets/images/bg-home-sports.jpg" alt="banner-three_sing"
												loading="lazy"></a></li>
								</ul>
							</div>
						</li> -->
						<li class="nav-promotions" data-content="PROMOTIONS" :data-title="$t('indexTitle.title14')"
							@click="goNextPage('/promotions')">
							<div class="nav-item">
								<img src="./assets/img/navicon-promo.webp" alt="">
								<h3>{{$t('indexTitle.title14')}}</h3>
							</div>
						</li>
						<li class="nav-page_qr" data-content="PAGE_QR" :data-title="$t('indexTitle.title3')">
							<div class="nav-item">
								<img src="./assets/img/navicon-vip.webp" alt="">
								<h3>{{$t('indexTitle.title3')}}</h3>
							</div>
							<div class="submenu">
								<div class="qr-item">
									<div class="qr-android">
										<img src="./assets/images/bg-home-sports.jpg" alt="banner-lucky_sports"
											loading="lazy">

										<h4 style="margin-top: 5px;">{{$t('indexTitle.title221')}}</h4>
									</div>
									<div class="qr-android">
										<img src="./assets/images/bg-home-sports.jpg" alt="banner-lucky_sports"
											loading="lazy">
										<h4 style="margin-top: 5px;">{{$t('indexTitle.title222')}}</h4>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</header>
			<div class="">
				<div class="notic-barTTT" @click="goNextPage('/personalMsg')">
					<div class="notice-img">
						<img src="./assets/images/tongzhi.png" />
					</div>
					<div class="notice-bar-container">
						<div class="notice-bar__wrap">
							<span class="notice-bar__wrap_text">
								{{noticeCon.title}}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<el-dialog :visible.sync="noticeDialogVisible" :title="$t('indexTitle.title18')" width="500" class="notice"
			@close="noticeDialogVisible = false">
			<div class="noticeBox">
				<div class="noticeBoxIt" v-for="(item,index) in noticelists" :key="index">
					<div class="noticeBoxItTime">
						{{item.created_at}}
					</div>
					<div class="noticeBoxItText">
						{{item.title}}
					</div>
				</div>
			</div>
		</el-dialog>

		<!-- <topHearder></topHearder> -->
		<router-view :style="{ paddingTop: paddingTopdd + 'px' }" @transfer="changeshowlogin"
			@getShowLogin="showLogindd" @USERInfo="getUSERInfo" @getTokenNum="tokenNum" ref="childData"></router-view>
		<sideEdge v-show="$route.name!='login'"></sideEdge>
		<bottom v-show="$route.name!='login'"></bottom>
		<logins v-show="showlogin" @transfer="changeshowlogin"></logins>
		<!-- <div class="buttons" v-show="$route.name!='login'">
			<img src="./assets/images/xiaoxi.png" alt="" />
		</div> -->
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>

<script>
	import bottom from '@/components/bottom.vue'
	import logins from '@/views/login.vue'
	import sideEdge from '@/components/sideEdge.vue'
	import topHearder from '@/components/topHearder.vue'
	import loadingFour from '@/components/loadingFour.vue';
	import {
		userinfo,
		noticeList,
		getsystemconfig
	} from "./utils/api.js"
	export default {
		name: 'App',
		components: {
			bottom,
			sideEdge,
			logins,
			loadingFour
			// topHearder
		},
		data() {
			return {
				isInfo: false,
				isShowLang: false,
				token: Boolean,
				info: [],
				noticeCon: {},
				paddingTopdd: 180,
				isrefresh: false,
				showlogin: false,
				showloginTow: false,
				systemconfig: [],
				baseUrl: 'http://43.198.233.28/',
				noticeDialogVisible: false,
				noticelists: [],
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		created() {},
		mounted() {
			if (localStorage.getItem('language')) {
				localStorage.setItem('language', 'ft')
			}
			this.getNoticeList()
			this.getsystem()
			if (localStorage.getItem('userInfo')) {
				this.info = JSON.parse(localStorage.getItem('userInfo'))
			}
			if (localStorage.getItem('token') && !localStorage.getItem('userInfo')) {
				this.getuserinfo()
			} else if (!localStorage.getItem('token') && !localStorage.getItem('userInfo')) {
				this.token = false;
			}
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			showLogindd(msg) {
				this.showlogin = msg;
			},
			getUSERInfo(infojj) {
				this.info = JSON.parse(infojj)
				if (this.$refs["childData"].info) {
					this.$refs["childData"].info = infojj
				}
			},
			tokenNum(num) {
				console.log(num);
				this.$router.push('/')
				this.token = false;
			},
			changeshowlogin(e) {
				if (e == 1) {
					this.getuserinfo()
					this.token = true
					this.showlogin = false
					this.$router.push('/index')
				} else {
					this.showlogin = false
				}
			},
			getrefresh() {
				this.isrefresh = true;
				console.log(this.$refs["childData"].info);
				this.getuserinfo()
			},
			getNoticeList() {
				this.noticeCon = {};
				let that = this;
				let data = {}
				noticeList(data).then((res) => {
					if (res.status.errorCode == 0) {
						this.noticeCon = res.data.data[0];
						this.noticelists = res.data.data
					} else {
						// this.$message.error(res.status.msg);
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getsystem() {
				getsystemconfig().then((res) => {
					if (res.status.errorCode == 0) {
						this.systemconfig = res.data
					} else {

						// this.$message.error(res.status.msg);
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			loginOut() {
				localStorage.removeItem('token');
				localStorage.removeItem('siteTitle');
				localStorage.removeItem('siteIco');
				if (localStorage.getItem('languageTow')) {
					localStorage.removeItem('languageTow');
				}
				if (localStorage.getItem('language')) {
					localStorage.removeItem('language');
				}
				if (localStorage.getItem('userInfo')) {
					localStorage.removeItem('userInfo');
				}
				// window.location.reload()
				this.token = false;
				this.$router.push('/')
			},
			getShowLang() {
				if (localStorage.getItem('token')) {
					this.isInfo = false;
				}
				this.isShowLang = !this.isShowLang;
			},
			getShowInfo() {
				this.isShowLang = false;
				if (localStorage.getItem('token')) {
					this.isInfo = !this.isInfo
				}
			},
			getuserinfo() {
				// this.info = [];
				userinfo().then((res) => {
					if (res.status.errorCode == 0) {
						this.info = res.data
						this.token = true;
						localStorage.setItem('userInfo', JSON.stringify(this.info))
						console.log(this.$refs["childData"].info);
						if (this.$refs["childData"].info) {
							this.$refs["childData"].info = res.data
						}
					} else if (res.status.errorCode == 401) {
						localStorage.removeItem('token');
						if (localStorage.getItem('language')) {
							localStorage.removeItem('language');
						}
						localStorage.removeItem('siteTitle');
						localStorage.removeItem('siteIco');
						if (localStorage.getItem('languageTow')) {
							localStorage.removeItem('languageTow');
						}
						if (localStorage.getItem('userInfo')) {
							localStorage.removeItem('userInfo');
						}
						this.token = false;
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			goNextPage(page) {
				if (localStorage.getItem('token') && this.isInfo) {
					this.isInfo = false;
				}
				this.isShowLang = false;
				console.log(123, page)
				if (!localStorage.getItem('token') && page == '/deposit' || !localStorage.getItem('token') && page ==
					'/withdraw' || !localStorage.getItem('token') && page ==
					'/mine') {
					this.showlogin = true;
					this.token = false;
					return false;
				}
				if (this.$route.path == '/index' && page == '/personalMsg') {
					this.noticeDialogVisible = true;
					return false
				}
				this.$router.push(page)
			},
			goSevPage() {
				window.open(this.systemconfig.service_link, '_blank')
			},
			switchLang(lang) {
				if (lang == 'zh') {
					localStorage.setItem("languageTow", 'zh_cn');
				} else {
					localStorage.setItem("languageTow", lang);
				}
				if (localStorage.getItem('token')) {
					this.isInfo = false;
				}
				this.isShowLang = !this.isShowLang;
				this.$i18n.locale = lang;
				localStorage.setItem('language', lang)
				this.getNoticeList()
				this.getsystem()
				if (localStorage.getItem('userInfo')) {
					this.info = JSON.parse(localStorage.getItem('userInfo'))
				}
				if (localStorage.getItem('token') && !localStorage.getItem('userInfo')) {
					this.getuserinfo()
				} else if (!localStorage.getItem('token') && !localStorage.getItem('userInfo')) {
					this.token = false;
				}
				this.$router.go(0);
			},
		}
	}
</script>

<style>
	* {
		box-sizing: border-box;
	}

	body {
		margin: 0;
	}

	#app {
		width: 100%;
		/* background-color: #1a1a1a; */
	}

	.buttons {
		position: fixed;
		bottom: 7%;
		right: 20px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}

	/* 头部 */
	.quick-nav {
		background: #1a1a1a;
		box-shadow: 0 0 24px #000;
		color: #fff;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 21;
	}

	.quick-nav .main-header {
		align-items: center;
		display: flex;
		height: 50px;
		justify-content: space-between;
		min-width: 1200px;
	}

	.main-wrap {
		margin: 0 auto;
		position: relative;
		padding: 0px 200px;
	}

	.quick-nav .main-header>* {
		align-items: center;
		display: flex;
		position: relative;
	}

	.left-sidemenu-wrap {
		position: relative;
	}

	.gengduoxinxi {
		width: 22px;
		height: 22px;
		margin-right: 15px;
	}

	.left-side {
		background-color: #222;
		border-radius: 0 0 8px 8px;
		box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
		flex-direction: column;
		gap: 15px;
		padding: 15px;
		position: absolute;
		top: 30px;
		width: 300px;
		z-index: 9;
	}

	.account-info-block {
		align-items: center;
		cursor: pointer;
		display: flex;
		position: relative;
	}

	.account-info-block .avatarImg {
		align-items: center;
		background: linear-gradient(180deg, #9e4fff, #5235ff);
		border-radius: 50%;
		display: flex;
		height: 50px;
		justify-content: center;
		position: relative;
		width: 50px;
	}

	.account-info-block .avatarImg img {
		height: 25px;
		width: 25px;
	}

	.account-info-block .rank {
		background: #888;
		border-radius: 50px;
		color: #fff;
		font-size: 12px;
		left: 25px;
		line-height: 1;
		padding: 3px 6px;
		position: absolute;
		top: -2%;
		transform: scale(.75);
		white-space: nowrap;
	}

	.account-info-block .account-info {
		padding-left: 18px;
		word-break: break-all;
	}

	.account-info-block .account-info .name {
		color: #fff;
		font-weight: 700;
	}

	.link-block-section .link-blocks {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 15px;
	}

	.link-block-section .link-blocks .link-block-item {
		align-items: center;
		background: #333;
		border-radius: 4px;
		color: #ccc;
		cursor: pointer;
		display: flex;
		gap: 8px;
		min-height: 60px;
		padding: 8px;
		position: relative;
		width: calc(50% - 4px);
	}

	.link-block-item img {
		width: 30px;
		height: 30px;
	}

	.link-block-item .block-item-title {
		font-size: 14px;
		font-weight: 400;
		line-height: 1.2;
	}

	.msg-notification {
		background: red;
		border-radius: 50%;
		height: 10px;
		left: -3px;
		position: absolute;
		top: -3px;
		width: 10px;
	}

	.link-icons {
		margin-top: 10px;
	}

	.link-icons .link-icon-item {
		align-items: center;
		color: #ccc;
		cursor: pointer;
		display: flex;
		padding: 7px 0;
		text-decoration: none;
	}

	.link-icons .link-icon-item img {
		width: 27px;
		height: 27px;
	}

	.link-icon-item>h4 {
		align-items: center;
		display: flex;
		font-size: 14px;
		font-weight: 400;
		padding-left: 10px;
		position: relative;
		margin: 0 auto;
		width: calc(100% - 40px);
	}

	.quick-nav .main-header .time {
		color: #888;
		font-size: 12px;
		margin-right: 10px;
	}



	.quick-nav .main-header .header-account {
		align-items: center;
		display: flex;
		gap: 15px;
		position: relative;
	}

	.quick-nav .main-header .header-account .playerid {
		cursor: pointer;
	}

	.quick-nav .main-header .header-account .payment-function {
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.payment-function img {
		width: 26px;
		height: 26px;
	}

	.avatar img {
		cursor: pointer;
		width: 30px;
		height: 30px;
	}

	.quick-nav .main-header .btn-big {
		background: linear-gradient(180deg, #19f0ca, #05c8c6);
		border-radius: 5px;
		color: #fff;
		font-size: 13px;
		cursor: pointer;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 90px;
		transition: .2s;
	}

	.quick-nav .main-header .btn-bigTow {
		background: linear-gradient(180deg, #9e4fff, #5235ff);
		border-radius: 5px;
		color: #fff;
		font-size: 13px;
		cursor: pointer;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 90px;
		transition: .2s;
	}

	/* 语言 */
	.yuyanbox:after {
		background: #888;
		content: "";
		height: 25px;
		position: absolute;
		width: 1px;
	}

	.yuyanbox {
		display: flex;
		position: relative;
		align-items: center;
		cursor: pointer;
	}

	.dsaf {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: #888888;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 7px;
	}

	.dsaf img {
		width: 13px;
		height: 13px;
	}

	.yuyanbox>img {
		width: 25px;
		height: 25px;
		margin-left: 10px;
		border-radius: 50%;
	}

	.langBox {
		position: absolute;
		width: 50px;
		background-color: #2f2f2f;
		font-size: 13px;
		color: #fff;
		bottom: -130px;
		right: 0px;
		border-radius: 5px;
	}

	.langItBox {
		width: 100%;
		padding-left: 10px;
		display: flex;
		align-items: center;
		height: 40px;
	}

	.langItBox img {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		margin-right: 3px;
	}


	header {
		background: #1d1d1d;
		border-bottom: 1px solid rgba(255, 255, 255, .05);
		height: 90px;
		left: 0;
		padding: 0px 200px;
		position: absolute;
		top: 50px;
		width: 100%;
		z-index: 20;
	}

	header .navigation {
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin: auto;
		position: static;
	}

	header .logo img {
		cursor: pointer;
		flex: 0 0 200px;
		height: 69px;
		width: 200px;
		margin-top: 10px;
	}

	.nav {
		align-items: center;
		display: flex;
		flex: 1;
		padding: 0 20px;
		margin: 0;
	}

	ul {
		list-style: none;
	}

	.nav .nav-item {
		align-items: center;
		color: #777;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		font-size: 13px;
		gap: 8px;
		height: 90px;
		justify-content: center;
		padding: 0 10px;
		position: relative;
		text-align: center;
		width: 100px;
		/* white-space: nowrap; */
	}

	.nav .nav-item:hover {
		color: #fff;
	}

	.nav .nav-item img {
		width: 40px;
		height: 40px;
	}

	.nav .nav-item h3 {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		font-weight: 400;
		justify-content: center;
		margin: 0;
		font-size: 14px;
		width: 100%;
	}

	.nav .submenu {
		background: url('./assets/images/sub-menu-bg.webp');
		box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
		height: 0;
		left: 0;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		text-align: center;
		transition: .3s;
		width: 100%;
	}

	.nav .submenu ul {
		font-size: 0;
		height: 300px;
		margin: auto;
		display: flex;
		padding-left: 0;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.nav .submenu ul li {
		height: 100%;
		position: relative;
	}

	.nav .submenu ul li a {
		display: block;
		height: 100%;
		padding: 0 15px;
		position: relative;
		transition: .3s;
	}

	.submenu ul li a:hover {
		background-color: rgba(255, 255, 255, .1);
	}

	.submenu ul li a:hover:after {
		background-color: #5235ff;
		bottom: 0;
		content: "";
		height: 4px;
		left: 0;
		position: absolute;
		width: 100%;
	}

	.nav .submenu ul li img {
		display: block;
		width: 200px;
		height: 80%;
		position: relative;
		top: 10%;
	}

	.qr-item {
		width: 30%;
		height: 100%;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;

	}

	.qr-android {
		width: 150px;
	}

	.qr-android img {
		width: 150px;
		height: auto;
	}

	.qr-android h4 {
		font-weight: 400;
		font-size: 14px;
	}

	.nav .nav-item:hover+.submenu {
		height: 300px;
		opacity: 1;
	}

	.submenu:hover {
		height: 300px;
		opacity: 1;
	}

	.wallet {
		display: flex;
		align-items: center;
	}

	.wallet img {
		width: 20px;
		height: 20px;
		margin: 0px 10px 0px 3px;
	}


	.wallet img:active {
		/* 加上这个才可以连续点击 */
		animation: none;
	}

	.ssssxuanzhuan {
		animation: rotatefresh 1s;
	}

	@keyframes rotatefresh {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg);
			transition: all 0.6s;
		}
	}

	/* 通知 */
	.notic-barTTT {
		width: 100%;
		margin: 0px auto;
		display: flex;
		background: #353535;
		align-items: center;
		height: 40px;
		padding: 5px 200px;
		z-index: 4;
		/* border-radius: 5px; */
		position: absolute;
		top: 140px;
		box-sizing: border-box;
	}

	.notice-bar-container {
		display: flex;
		align-items: center;
		width: calc(100% - 30px);
		height: 35px;
		overflow: hidden;
		margin-left: 5px;
	}

	.notice-img {
		width: 25px;
		background-color: #ffffff;
		border-radius: 50%;
		height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.notice-img img {
		width: 15px;
		height: 15px;
	}

	.notice-bar__wrap {
		margin-left: 10px;
		display: flex;
		align-items: center;
		animation: move 20s linear infinite;
		line-height: 35px;
		font-size: 15px;
		cursor: pointer;
		color: #fff;
		width: 100%;
	}

	.notice-bar__wrap_text {
		width: max-content;
		min-width: 100px;
	}

	.notice-bar__wrap:hover {
		animation-play-state: paused;
	}


	@keyframes move {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}


	.noticeBox {
		width: 100%;
		height: 400px;
		padding: 30px 20px;
		overflow-y: auto;
	}

	.noticeBoxIt {
		display: flex;
		align-items: center;
		height: 88px;
		background-color: #fff;
		font-size: 14px;
	}

	.noticeBoxIt:nth-child(2n) {
		background-color: #f5f5f5;
	}

	.noticeBoxItTime {
		width: 160px;
		text-align: center;
		color: #5235ff;
	}

	.noticeBoxItText {
		flex: 1;
		padding: 0px 30px;
		box-sizing: border-box;
		text-align: center;
		color: #777;
	}

	.notice {
		padding: 0 !important;
		border-radius: 5px !important;
	}

	.notice .el-dialog {
		margin-top: 25vh !important;
	}

	.notice .el-dialog__body {
		padding: 0;
	}

	.notice .el-dialog__header {
		padding-bottom: 0;
		background-color: #5235ff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20px;
	}

	.notice .el-dialog__title {
		color: #fff;
		font-size: 15px;
		padding-left: 10px;
	}

	.notice .el-dialog__headerbtn .el-dialog__close {
		color: #fff;
		font-size: 18px;
	}
</style>